<template>
	<div style="margin-bottom: 100px;">
		<br/>
		<div>
			<!-- 轮播图 -->
			<el-carousel :interval="2000" type="card" height="338px">
				<el-carousel-item v-for="item in imageList" :key="item.imageId">
				<img :src="item.imageURL" style="width: 100%"></img>
				</el-carousel-item>
			</el-carousel>
		</div>
		
		<div style="margin: 10px 0;padding-top: 30px;">
			<el-row :gutter="10">
				
				<!--          @click="getCategory(item.categoryId)"分类-->
<!-- 				<el-col :span="4">
				  <div style="border: 2px dashed coral; text-align: center;">
				    <div class="category-item" 
					v-for="item in categories" 
					:key="item.categoryId"
					:class="{ active: (activeIndex === item.categoryId)}">{{item.categoryName }}</div>
				  </div>
				</el-col> -->
				
				<el-col :span="4" v-for="item in productList" :key="item.productId" style="margin-bottom: 20px;margin-left: 10px;">
					<div style="border: 1px solid #ccc; padding-bottom: 10px;border-radius: 10px; overflow: hidden;">
						<img :src="item.productImage" style="width: 100%;height: 250px;">
						<div style="color:#666;padding: 5px;font-size: 16px;"><b>{{item.productName}}</b></div>
						<div style="color:#666;padding: 10px; font-size: 15px" >{{item.productDes}}</div>
						<div style="padding: 5px;font-size: 15px;color: red;">￥{{item.productPrice}}</div>
						<div style="padding: 10px;"><el-button type="warning" @click='$router.push("/ProductDetail?id="+item.productId)'>查看商品</el-button></div>
					</div>
				</el-col>
			</el-row>
		</div>
		<Pagination :tableData="tableData" @emitPageData="receivePageData"></Pagination>
	</div>
</template>

<script>
import Pagination from "@/components/Pagination";
	
export default{
	name:"Home",
	components:{
		Pagination,
	},
	data(){
		return{
			imageList:[],
			productList:[],
			categories: [],
			activeIndex:0,
			// 查询参数
			search: {
				currentPage: 1,
				pageSize: 5,
				// productName: "",
				// sort: "id",
				// direction: "desc",
			},
			// 表格数据结构，参考 PageInfo
			tableData: {
				total: 20, // 总数据量
				pageNum: 1, // 当前页
				pageSize: 5, // 页长
				pages: 1, // 总页数
			},
		}
	},
	methods:{
		loadImage:function(){
		this.$Request
			.fetch("/api/image/selectImageAll")
			.then((result) => {
				var newResult  = result.data;
				//console.log(newResult);
				this.imageList = newResult;
			})
			.catch((error) => {
				this.$message.error(error);
			});
		},
		loadProduct:function(){
			this.$Request
			.fetch_("/api/product/selectProductPage","post",this.search)
			.then((result) =>{
				//console.log(result);
				var newResult = result.data;
				this.productList = newResult.records;
				this.tableData.total = newResult.total;
				this.tableData.pageNum = newResult.current;
				this.tableData.pageSize = newResult.size;
				this.tableData.pages = newResult.pages;
			})
			.catch((error) => {
				this.$message.error(error);
			});
		},
		// loadCategories(){
		// 	this.$Request
		// 	.fetch("/api/category/selectCategoryName")
		// 	.then((result) =>{
		// 		//console.log(result);
		// 		var newResult = result.data;
		// 		this.categories = newResult;
		// 	})
		// 	.catch((error) => {
		// 		this.$message.error(error);
		// 	});
		// },
		
		// 接收分页组件 $emit 函数传递的值
		receivePageData: function (pageData) {
			this.search.currentPage = pageData.pageNum;
			this.search.pageSize = pageData.pageSize;
			this.loadImage();
			this.loadProduct();
			//this.loadCategories();
		},
		
	},
	created() {
		this.loadImage();
		this.loadProduct();
		//this.loadCategories();
	}
}
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  
  .active {
    color: red !important;
  }
  
  .category-item {
    padding: 5px 0;
    border-bottom: 1px dashed #ccc;
    color: #666;
    cursor: pointer;
  }
</style>